<template>
  <div class="home-page-main">
    <div class="home-title">
      <img :src="logoSrc" alt="" />
      <div class="right-icon">
        <img @click="categorys('/lang')" :src="lang.icon" alt="" />
        <van-icon name="arrow-down" />
        <!--            <img @click="category('/message')" class="tips" src="../../assets/image/msg.png" alt="">-->
      </div>
    </div>
    <div class="home-search" @click="categorys('/search')" v-if="!showSeleton">
      <div class="input-label">
        <img src="../../assets/image/search.png" alt="" />
        <div class="holder">{{ $t('h.B001') }}</div>
      </div>
    </div>
    <skeleton v-if="showSeleton" />
    <div
      v-else
      class="home-page-list-content"
    >
      <div class="home-swipper">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item v-for="item in lunbo">
            <img class="image" :src="item.pic" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="category-image">
        <div
          class="ks_daohang"
          :style="{ transform: 'translateX(' + currentOffset + 'px)' }"
        >
          <div
            class="ks-item-image"
            @click="
              $router.push({
                path: '/category/' + item.id,
                query: { name: item.name },
              })
            "
            v-for="(item, index) in category"
            :key="index"
          >
            <div class="ks-item">
              <div class="item-image">
                <img :src="item.icon" alt="" />
              </div>
              <div class="item-nav">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="category-title">{{ $t('h.B002') }}</div>

      <div class="category-product">
        <div
          class="ks_daohang"
          :style="{ transform: 'translateX(' + currentOffset + 'px)' }"
        >
          <div
            @click="toClickPath('goods', item)"
            class="ks-item-image"
            v-for="(item, index) in new_list"
            :key="index"
          >
            <div class="ks-item">
              <div class="item-image">
                <img :src="item.mainimage" alt="" />
              </div>
              <div class="item-name">{{ item.name }}</div>
              <div class="item-nav">${{ item.price }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="category-title">{{ $t('h.B003') }}</div>

      <van-swipe indicator-color="white" @change="onChange">
        <van-swipe-item
          v-for="(item, index) in parseInt(recommendList.length / 4)"
          :key="index"
        >
          <div class="product-item">
            <div
              @click="toClickPath('goods', items)"
              v-for="(items, index1) in recommendList.slice(
                (item - 1) * 4,
                item * 4
              )"
              :key="index1"
              class="item"
            >
              <img :src="items.mainimage" alt="" />
              <div class="item-name">{{ items.name }}</div>
              <p class="item-price">$ {{ items.price }}</p>
              <p class="item-sale">{{ $t('h.B004') }} {{ items.sales }}</p>
              <p class="item-content">{{ items.content }}</p>
            </div>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="dot">
            <div
              v-for="(item, index) in parseInt(recommendList.length / 4)"
              :key="index"
              :class="{ active: index === current }"
              class="custom-indicator"
            />
          </div>
        </template>
      </van-swipe>

      <div class="category-title">{{ $t('h.B005') }}</div>

      <div class="shop-store">
        <div class="shop-item" v-for="item in rand_shop">
          <div class="shop-up">
            <el-avatar :src="item.avatar" :size="50">
              <div class="fail-img"></div>
            </el-avatar>
<!--            <img :src="item.avatar" alt="" />-->
            <div class="box-right">
              <div class="left">
                <p class="shop-name">{{ item.title }}</p>
                <p class="shop-goods shop-love">
                  {{ $t('h.B006') }}：{{ item.count }}
                </p>
              </div>
              <div class="right">
                <button @click="$router.push('/store/' + item.id)">
                  {{ $t('h.B007') }} >
                </button>
              </div>
            </div>
          </div>
          <div class="shop-bottom">
            <span>{{ $t('h.B008') }}: {{ item.xinyufen }}</span>
            <span>{{ $t('h.B009') }}:$ {{ item.sales_data }}</span>
          </div>
        </div>
      </div>

      <div class="category-title">{{ $t('h.B010') }}</div>

      <div class="product-item">
        <div
          @click="toClickPath('goods', items)"
          v-for="(items, index1) in hotSellingList"
          :key="index1"
          class="item"
        >
          <img :src="items.mainimage" alt="" />
          <div class="item-name">{{ items.name }}</div>
          <p class="item-price">$ {{ items.price }}</p>
          <p class="item-sale">{{ $t('h.B011') }} {{ items.sales }}</p>
          <p class="item-content">{{ items.content }}</p>
        </div>
      </div>
      <!-- <Footer></Footer> -->
    </div>
    <div class="to-top-btn" @click="BackToTop">
        <van-icon name="arrow-up" size="20" color="#fff" />
      </div>
  </div>
</template>

<script>
import skeleton from '@/views/appHomePage/skeleton.vue';
// import safeBottom from '@/components/saveBottom/index.vue'
import Footer from '@/components/flooter/index.vue';
import { Toast } from 'vant';
import { mapState } from 'vuex';

export default {
  components: {
    Footer,
    skeleton,
  },
  data() {
    return {
      showSeleton: true,
      logoSrc: null,
      category: [],
      lunbo: [],
      new_list: [],
      rand_list: [],
      //推荐商品 前八条
      recommendList: [],
      hotSellingList: [],
      rand_shop: [],
      current: 0,
      list: [],
      currentIndex: 0,
      autoPlayInterval: null,
      isLoading: false,
    };
  },
  computed: {
    ...mapState(['lang']),
    currentOffset() {
      return -100 * this.currentIndex;
    },
  },
  methods: {
    BackToTop(){
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    toClickPath(path, item) {
      this.$router.push({
        path: path,
        query: {
          id: item.id,
          shop: item.shop_id,
        },
      });
    },
    categorys(item) {
      this.$router.push(item).catch((err) => {});
    },
    toClick(path, item) {
      this.$router.push('/' + path);
    },
    nextItem() {
      if (this.currentIndex < this.list.length - 3) {
        this.currentIndex += 1;
      } else {
        this.currentIndex = 0;
      }
    },
    startAutoPlay() {
      this.autoPlayInterval = setInterval(this.nextItem, 3000);
    },
    onChange(index) {
      this.current = index;
    },
    stopAutoPlay() {
      if (this.autoPlayInterval) {
        clearInterval(this.autoPlayInterval);
      }
    },
    getHomePageData() {
      this.isLoading = true;
      this.$store
        .dispatch('getHomeData')
        .then((res) => {
          this.logoSrc = res.data.logo;
          this.category = res.data.category;
          this.lunbo = res.data.lunbo;
          this.rand_shop = res.data.rand_shop;
          //上新前16条
          this.new_list = res.data.list.slice(0, 16);
          //推荐列表取中间8条
          this.recommendList = res.data.list.slice(16, 24);
          this.hotSellingList = res.data.list.slice(24);
          // this.new_list = res.data.new_list;
          // this.rand_list = res.data.rand_list;
          // var splitArray = this.splitArray(res.data.rand_list);
          // this.recommendList = splitArray[0]
          // this.hotSellingList=splitArray[1];
        })
        .catch((err) => {})
        .finally(() => {
          this.isLoading = false;
          this.showSeleton = false;
        });
    },
    splitArray(arr) {
      const middle = Math.ceil(arr.length / 2);
      const firstHalf = arr.slice(0, middle);
      const secondHalf = arr.slice(middle);
      return [firstHalf, secondHalf];
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.getHomePageData();
      }, 1000);
    },
  },
  mounted() {
    this.showSeleton = true;
    // this.startAutoPlay();
    this.$once('hook:beforeDestroy', this.stopAutoPlay);
  },
  created() {
    let self = this;
    self.getHomePageData();
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/base/index';

.to-top-btn {
  position: fixed;
  right: 10px;
  bottom: 80px;
  z-index: 999;
  background: #0533ff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.home-page-main {
  width: 100vw;
  overflow: hidden;
  padding: 0 12px;
  box-sizing: border-box;
  position: relative;

  .home-title {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      height: 22px;
    }

    .right-icon {
      font-size: 12px;
      color: #aaaaaa;
      display: flex;
      align-items: center;

      img {
        height: 22px;
        margin-right: 2px;
      }

      .tips {
        height: 21px;
        margin-left: 10px;
      }
    }
  }

  .home-search {
    background: #ffffff;
    left: 0;
    z-index: 100;
    top: 53px;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .input-label {
      width: 100%;
      height: 45px;
      border-radius: 45px;
      background: #f6f6f6;
      font-size: 14px;
      color: #999;
      display: flex;
      gap: 5px;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;

      img {
        margin-right: 5px;
        height: 16px;
      }
      .holder {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .home-page-list-content {
    height: calc(100% - 53px - 52px);
    overflow: hidden;
    overflow-y: auto;
  }

  .home-swipper {
    width: 100%;
    height: 180px;

    .image {
      width: 100%;
      height: 168px;
      border-radius: 10px;
    }
  }

  ::-webkit-scrollbar {
    width: 0;
  }

  .category-image {
    width: 100%;
    height: 150px;
    margin-top: 30px;
    display: flex;
    //background: red;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;

    .ks_daohang {
      display: flex;
      transition: transform 0.5s ease;

      .ks-item-image {
        height: 150px;
        width: 100%;

        /*flex-shrink: 0;*/
        /*background: #f6f6f6;*/
        .ks-item {
          width: 100px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-items: center;

          .item-image {
            width: 90px;
            height: 80px;
            border: 1px solid #f6f6f6;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              height: 72px;
              width: 72px;
            }
          }

          .item-nav {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            margin-top: 8px;
          }
        }
      }
    }
  }

  .category-title {
    height: 20px;
    width: 100%;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .category-product {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;

    .ks_daohang {
      display: flex;
      transition: transform 0.5s ease;
      gap: 10px;

      .ks-item-image {
        width: 100%;

        .ks-item {
          width: 100px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 10px;
          align-items: center;
          overflow: hidden;

          .item-image {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              height: 100px;
              width: 100px;
              object-fit: contain;
            }
          }

          .item-nav {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            margin-top: 8px;
            color: #002fff;
            font-weight: 500;
          }
        }
      }
    }
  }

  .shop-store {
    width: 100%;

    .shop-item {
      width: 100%;
      min-height: 100px;
      border: 1px solid #f6f6f6;
      border-radius: 8px;
      margin-bottom: 15px;
      padding: 2% 3%;
      box-sizing: border-box;

      .shop-up {
        width: 100%;
        display: flex;
        padding: 0 0 15px 0;
        justify-content: space-between;
        border-bottom: 1px solid #f6f6f6;
        .box-right {
          width: 80%;
          height: 60px;
          display: flex;
          align-items: center;

          .left {
            width: 80%;
            padding: 0 0 0 15px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 5px;
            .shop-name {
              font-size: 16px;
              margin: 5px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              box-orient: vertical;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .shop-love {
              font-size: 12px;
              color: #999999;
            }
          }

          .right {
            width: 100px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;

            button {
              height: 24px;
              padding: 5px 10px;
              border-radius: 24px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              border: none;
              background: #002fff;
              color: #fff;
              font-size: 12px;
              white-space: nowrap;
            }
          }
        }
      }

      .shop-bottom {
        width: 100%;
        display: flex;
        margin-top: 5px;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }

  .product-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      margin-bottom: 10px;
      width: 160px;
      min-height: 220px;
      padding: 6px;
      border: 1px solid #f6f6f6;

      img {
        width: 160px;
        height: 160px;
      }

      .item-price {
        margin-top: 10px;
        width: 100%;
        color: #002fff;
        font-size: 16px;
        font-weight: 500;
      }

      .item-sale {
        width: 100%;
        color: #999;
        font-size: 10px;
        margin: 5px 0;
      }

      .item-content {
        width: 100%;
        color: #000;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .dot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;

    .custom-indicator {
      margin: 0 3px;
      width: 13px;
      height: 2px;
      background: #999;
    }

    .active {
      background: #002fff;
    }
  }
}

.item-name {
  font-size: 14px;
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fail-img{
  position: relative;
  overflow: hidden;
  height: 50px;
  background: #e0e0e0;
  animation: pulse 2s infinite;
}
.fail-img::after{
  position: absolute;
  top: 0;
  inset-inline-end: -150%;
  bottom: 0;
  inset-inline-start: -150%;
  background: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.06) 25%,
          rgba(0, 0, 0, 0.15) 37%,
          rgba(0, 0, 0, 0.06) 63%
  );
  animation-name: skeleton-loading;
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  content: '';
}
@keyframes skeleton-loading {
  0% {
    transform: translateX(-37.5%);
  }
  100% {
    transform: translateX(37.5%);
  }
}
</style>
